<template>
  <div v-if="getShow" class="animate__animated animate__slideInRight">
    <div class="text-30px font-bold mb-4">注册</div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input
          class="input"
          placeholder="账号"
          v-model:value="formState.username"
        />
      </a-form-item>

      <a-form-item>
        <a-input
          class="input"
          placeholder="手机号码"
          v-model:value="formState.username"
        />
      </a-form-item>

      <a-form-item>
        <div class="code-input w-full flex justify-between">
          <a-input
            class="input"
            placeholder="验证码"
            v-model:value="formState.username"
          />
          <a-button class="w-1/4">获取验证码</a-button>
        </div>
      </a-form-item>

      <a-form-item>
        <a-input-password
          class="input"
          placeholder="密码"
          v-model:value="formState.username"
        />
        <a-progress
          :showInfo="false"
          :percent="50"
          class="w-full justify-between"
          :steps="5"
          :strokeColor="`red`"
        />
      </a-form-item>

      <a-form-item>
        <a-input-password
          placeholder="密码"
          class="input"
          v-model:value="formState.password"
        />
      </a-form-item>

      <a-form-item name="remember">
        <a-checkbox v-model:checked="formState.remember"
          >我同意xxx隐私政策</a-checkbox
        >
      </a-form-item>

      <a-form-item>
        <div class="space-y-5">
          <a-button class="w-full" type="primary" html-type="submit"
            >注册</a-button
          >
          <a-button class="w-full" @click="switchLogin">返回</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";
// import { FormStatus, useLogin, useLoginForm } from "@/hooks/useLogin";
import { FormStatus, useUserStore } from "@/stores/useUser";
import { storeToRefs } from "pinia";
import type { UserLoginDto } from "@/api";

const userStore = useUserStore();
const { getStatus } = storeToRefs(userStore);
const { switchLogin } = userStore;

// const { getStatus } = useLoginForm();
// const { switchLogin } = useLogin();
const getShow = computed<boolean>(
  () => getStatus.value === FormStatus.RegisterForm
);

const formState = reactive<UserLoginDto>({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped lang="less">
/deep/ .ant-progress-steps-outer {
  width: 100% !important;
  justify-content: space-between;
  .ant-progress-steps-item {
    width: 19.5% !important;
  }
}

.code-input /deep/ .ant-input {
  width: 70% !important;
}
</style>
